<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>世界很大，这是我探索的第一步</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css?v=123"/>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/modernizr.min.js"></script>
    <style type="text/css">
    /*浅蓝*/
    .p1{background-color: #c2e4f6}
    /*蓝*/
    /*.p2{background-color: #0253a2}*/
    </style>
</head>
<body>
<div id="prebox" class="v2">
    <div class="pos_abs loading">
        <div class="windows8">
            <p><strong class="number"></strong></p>
        </div>
        <div class="logo-text">世界很大，这是我探索的第一步</div>
    </div>
</div>
<div class="flipbook-viewport" style="display:none;">
    <div class="previousPage"></div>
    <div class="nextPage"></div>
    <div class="return"></div>
    <img class="btnImg" src="http://static.wapui.com/image/act/demo/demo02/btn.gif" style="display: none"/>
    <div class="container">
        <div class="flipbook">
        </div>
    </div>
</div>
<script>
window.onload = function () {
    //预加载
    loading();
}

var date_start;
var date_end;
date_start = getNowFormatDate();
//加载图片
var loading_img_url = [
    // part1
    "./img/1.jpg",
    "./img/2.jpg",
    "./img/3.jpg",
    "./img/4.jpg",
    "./img/5.jpg",
    "./img/6.jpg",
    "./img/7.jpg",
    "./img/8.jpg",
    "./img/9.jpg",
    "./img/10.jpg",
    "./img/11.jpg",
    "./img/12.jpg",
    "./img/13.jpg",
    "./img/14.jpg",
    "./img/15.jpg",
    "./img/16.jpg",
    "./img/17.jpg",
    "./img/18.jpg",
    "./img/19.jpg",
    "./img/20.jpg",
    "./img/21.jpg",
    "./img/22.jpg",
    "./img/23.jpg",
    "./img/24.jpg",

    "./img/loading.jpg"

];

//加载页面
function loading() {
    var numbers = 0;
    var length = loading_img_url.length;

    for (var i = 0; i < length; i++) {
        var img = new Image();
        img.src = loading_img_url[i];
        img.onerror = function () {
            numbers += (1 / length) * 100;
        }
        img.onload = function () {
            numbers += (1 / length) * 100;
            $('.number').html(parseInt(numbers) + "%");
            // console.log(numbers);
            if (Math.round(numbers) == 100) {
                //$('.number').hide();
                setTimeout(function(){
                    showpage();
                },1000);
            };
        }
    }

    function showpage(){
        date_end = getNowFormatDate();
        var loading_time = date_end - date_start;
        //预加载图片
        $(function progressbar() {
            //拼接图片
            $('#prebox').remove();
            var tagHtml = "";
            for (var i = 1; i <= length; i++) {
                tagHtml += ' <div class="pager" style="background-image:url(' + loading_img_url[i-1] + ')"></div>';
            }
            $(".flipbook").append(tagHtml);
            var w = $(".graph").width();
            $(".flipbook-viewport").show();
        });
        //配置turn.js
        function loadApp() {
            var w = $(window).width();
            var h = $(window).height();
            $('.flipboox').width(w).height(h);
            $(window).resize(function () {
                w = $(window).width();
                h = $(window).height();
                $('.flipboox').width(w).height(h);
            });
            $('.flipbook').turn({
                // Width
                width: w,
                // Height
                height: h,
                // Elevation
                elevation: 50,
                display: 'single',
                // Enable gradients
                gradients: true,
                // Auto center this flipbook
                autoCenter: true,
                when: {
                    turning: function (e, page, view) {
                        if (page == 1) {
                            $(".btnImg").css("display", "none");
                            $(".mark").css("display", "block");
                        } else {
                            $(".btnImg").css("display", "block");
                            $(".mark").css("display", "none");
                        }
                        if (page == 41) {
                            $(".nextPage").css("display", "none");
                        } else {
                            $(".nextPage").css("display", "block");
                        }
                    },
                    turned: function (e, page, view) {
                        console.log(page);
                        var total = $(".flipbook").turn("pages");//总页数
                        if(page == 25){
                            window.location.href = './part2.html';
                        }
                        if (page == 1) {
                            $(".return").css("display", "none");
                            $(".btnImg").css("display", "none");
                        } else {
                            $(".return").css("display", "block");
                            $(".btnImg").css("display", "block");
                        }
                        if (page == 2) {
                            $(".catalog").css("display", "block");
                        } else {
                            $(".catalog").css("display", "none");
                        }
                    }
                }
            })
        }
        yepnope({
            test: Modernizr.csstransforms,
            yep: ['./js/turn.js'],
            complete: loadApp
        });

    }
}

function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "";
    var seperator2 = "";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        + "" + date.getHours() + seperator2 + date.getMinutes()
        + seperator2 + date.getSeconds();
    return currentdate;
}

    //自定义仿iphone弹出层
    (function ($) {
        //ios confirm box
        jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
            var defaults = {
                title: null, //what text
                cancelText: '取消', //the cancel btn text
                okText: '确定' //the ok btn text
            };

            if (undefined === option) {
                option = {};
            }
            if ('function' != typeof okCall) {
                okCall = $.noop;
            }
            if ('function' != typeof cancelCall) {
                cancelCall = $.noop;
            }

            var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

            var $dom = $(this);

            var dom = $('<div class="g-plugin-confirm">');
            var dom1 = $('<div>').appendTo(dom);
            var dom_content = $('<div>').html(o.title).appendTo(dom1);
            var dom_btn = $('<div>').appendTo(dom1);
            var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
            var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
            btn_cancel.on('click', function (e) {
                o.cancelCall();
                dom.remove();
                e.preventDefault();
            });
            btn_ok.on('click', function (e) {
                o.okCall();
                dom.remove();
                e.preventDefault();
            });

            dom.appendTo($('body'));
            return $dom;
        };
    })(jQuery);

    //上一页
    $(".previousPage").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage >= 2) {
            $(".flipbook").turn('page', currentPage - 1);
        } else {
        }
    });
    // 下一页
    $(".nextPage").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage <= pageCount) {
            $(".flipbook").turn('page', currentPage + 1);
        } else {
        }
    });
    //返回到目录页
    $(".return").bind("touchend", function () {
        $(document).confirm('您确定要返回首页吗?', {}, function () {
            $(".flipbook").turn('page', 1); //跳转页数
        }, function () {
        });
    });
</script>
</body>
</html>